<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">

    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>存储统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="bdb">
                            <div class="echarts" id="echarts-bar"></div>
                        </div>
                        <div class="bdb">
                            <div class="echarts" id="echarts-pie-1"></div>
                        </div>
                        <div class="bdb">
                            <div class="echarts" id="echarts-pie-2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>存储拓扑图</h5>
                    </div>
                    <div class="ibox-content" style="height: 420px;">
                             <img src="../../img/wl.png" alt="" style="width:100%;height:100%;">
                    </div>
                </div>
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>存储分配趋势图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>

    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>

    <script type="text/javascript">
        $(function () {

            // 柱状图
            var barChart = echarts.init(document.getElementById("echarts-bar"));
            var barData = [203, 334];

            var barOption = {
                title: {
                    text: '存储设备统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    height: '80%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['SAN存储', 'NAS存储'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    },
                    axisLabel: {
                        fontSize: 16
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '单位：T',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '35%',
                    data: barData,
                    label: {   // 图形上的文本标签
                        show: true,
                        position: 'insideTop', // 相对位置
                        color: '#fff'
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }]
            };
            barChart.setOption(barOption);
            $(window).resize(barChart.resize);

            // 饼状图1
            var pieChart1 = echarts.init(document.getElementById('echarts-pie-1'));
            var pieTotal1 = 125;
            var pieData1 = [
                { value: 335, name: '已使用' },
                { value: 310, name: '未使用' },
            ];
            var pieOption1 = {
                title: {
                    text: '存储容量统计',
                    top: '5%',
                    subtext: '总计：' + pieTotal1 + 'T',
                    subtextStyle: {
                        fontSize: 16,
                        color: '#454545',
                        align: 'left'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'bottom',
                    data: ['已使用', '未使用'],
                    itemWidth: 10
                },
                grid: {
                    height: 200
                },
                series: [
                    {
                        name: '存储容量',
                        type: 'pie',
                        radius: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: pieData1
                    }
                ]
            };
            pieChart1.setOption(pieOption1);
            $(window).resize(pieChart1.resize);


            // 饼状图2
            var pieChart2 = echarts.init(document.getElementById('echarts-pie-2'));
            var pieTotal2 = 60;
            var pieData2 = [
                { value: 335, name: '严重告警' },
                { value: 310, name: '一般告警' },
            ];
            var pieOption2 = {
                title: {
                    text: '告警统计',
                    top: '5%',
                    subtext: '总计：' + pieTotal2 + '个',
                    subtextStyle: {
                        fontSize: 16,
                        color: '#454545',
                        align: 'left'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'bottom',
                    data: ['严重告警', '一般告警'],
                    itemWidth: 10
                },
                grid: {
                    height: 200
                },
                series: [
                    {
                        name: '告警统计',
                        type: 'pie',
                        radius: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: pieData2,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#990101', '#ff9800']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                    }
                ]
            };
            pieChart2.setOption(pieOption2);
            $(window).resize(pieChart2.resize);


            // 折线图
            var lineChart = echarts.init(document.getElementById('echarts-line'));
            var lineData = [3, 2, 1, 4, 9, 10, 6, 5, 4, 3, 7, 8, 5, 3, 4, 3];
            var lineOption = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: function () {
                        var list = [];
                        for (var i = 0; i <= 31; i++) {
                            i++;
                            list.push(i);
                        }
                        return list;
                    }()
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: lineData,
                    type: 'line'
                }]
            };
            lineChart.setOption(lineOption);
            $(window).resize(lineChart.resize);


        })
    </script>
</body>

</html>